<template>
	<view class="">
		<block v-if="!boxHide">
			<!-- <view class="bar_top">
				<view class="bar_list">
					<view :class="barNum == 4 ? 'bar_item bar_active' : 'bar_item'" @tap="bar(4)">
						<text>商机客户</text>
					</view>
				</view>
			</view> -->
			
			<view class="opportunity_list">
				<view class="opportunity_item" v-for="(item,index) in list">
					<image class="opportunity_item_img" :src="item.avatar"></image>
					<view class="opportunity_item_text">
						<view class="opportunity_item_name">
							<view>{{item.title}}</view>
							<view v-if="barNum == 4">{{item.status == 1 ? '审核完成' : '审核中'}}</view>
							<view v-if="barNum == 3">过保客户</view>
						</view>
						<view>售后 上次联系：{{item.create_at}}</view>
					</view>
					<image src="/static/images/phone.png" class="opportunity_item_phone" @tap="makePhone(item.mobile)"></image>
				</view>
			</view>
		</block>
		<Loading ref="load"></Loading>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				boxHide:true,
				barNum:4,
				page:1,
				loading:true,
				list:[]
			}
		},
		onLoad() {
			this.getJson(1,4)
		},
		onReachBottom() {
			if(this.loading)this.getJson(1,this.barNum)
		},
		methods:{
			makePhone(phoneNumber){
				uni.makePhoneCall({phoneNumber})
			},
			bar(index){//导航
				if(this.barNum != index){
					this.getJson(1,index) 
				}
			},
			getJson(type,index){
				let belong = this.$store.getters.userInfo.branch_type != 1 ? 1 : 2;
				this.$refs.load.initLoading({loadType:type}).then(res =>{
					this.barNum = index;
					if(type == 1){this.page = 1;this.loading = true;this.list = [];}
					this.$api.getClientList({class:index,page:this.page,user_id:uni.getStorageSync("userId"),belong:belong}).then(res => {
						this.boxHide = false;
						this.$refs.load.getLoadingData({newData:res.data,oldData:this.list}).then(res =>{
							console.log(res)
							this.list = res.list;
							this.loading = res.loading;
							this.page ++ ;
						})
					})
				})
			}
		}
	}
</script>

<style>
	.opportunity_list{margin-top: 20upx;}
	.opportunity_item{width: 710upx;padding: 20upx;background: #FFFFFF;border-radius: 8upx;margin: 0 0 20upx 20upx;box-sizing: border-box;display: flex;flex-direction: row;align-items: center;}
	.opportunity_item_img{width: 92upx;height: 92upx;border-radius: 50%;background: #EEEEEE;}
	.opportunity_item_text{flex-grow: 1;font-size: 24upx;color: #9BA7B7;margin: 0upx 20upx;}
	.opportunity_item_name{width: 100%;display: flex;flex-direction: row;align-items: center;margin-bottom: 10upx;font-size: 30upx;color: #000000;}
	.opportunity_item_name view:nth-child(2){width: 120upx;line-height: 30upx;text-align: center;background: #FF801E;color: #FFFFFF;font-size: 24upx;margin-left: 10upx;}
	.opportunity_item_phone{width: 35upx;height: 40upx;}
</style>
